<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2021/10/11
  Time: 17:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <link href="${pageContext.request.contextPath}/css/shopcar.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.min.js"></script>

</head>
<body>
<div class="bg">
    <!--最上面的导航-->
    <div class="shortcut-2014">
        <div class="w">
            <ul class="fr">

                <c:if test="${empty loginCustomer}">
                    <li class="fore1 fore1zidingyi" id="ttbar-login">
                        <a href="${pageContext.request.contextPath}/customer/login.jsp" class="link-login">你好，请登录</a>
                        &nbsp;&nbsp;
                        <a href="" class="link-regist style-red">免费注册</a>
                    </li>
                </c:if>

                <c:if test="${!empty loginCustomer}">
                    <li class="fore1 fore1zidingyi" id="ttbar-login">
                        <span style="font-size: 12px">欢迎</span>
                        &nbsp;&nbsp;
                        <span style="color: red;">${loginCustomer.custNickname}</span>
                        &nbsp;&nbsp;
                        <span style="font-size: 12px">登录</span>
                        &nbsp;&nbsp;
                        <a href="${pageContext.request.contextPath}/cust/logout" class="link-regist style-red">退出</a>
                    </li>
                </c:if>

                <%--<li class="fore1 fore1zidingyi" id="ttbar-login">
                    <a href="" class="link-login">你好，请登录</a>
                    &nbsp;&nbsp;
                    <a href="" class="link-regist style-red">免费注册</a>
                </li>--%>
                <!--<li class="spacer"></li>-->
                <li class="fore2">
                    <div class="dt">
                        <a href="${pageContext.request.contextPath}/myorder/${loginCustomer.custId}" target="_blank">我的订单</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div id="o-header-2013">
        <div id="header-2013" style="display:none;"></div>
    </div>

    <!-- 下面的带 logo 的部分 -->
    <div id="nav">
        <div class="w">

            <!-- logo 部分 -->
            <div class="logo">
                <a href="" class="fore11" target="_blank"></a>
                <a href="" class="fore22" target="_blank">我的树懒</a>
                <a href="http://localhost:8080/shulanmiaosha/product/generalMerchandise.jsp" class="fore33" target="_blank">返回树懒首页</a>
            </div>


        </div>
        <div class="wwwenzi"> <a class="wwwenzi1" target="_blank">倾我全力，包你满意，一切尽在树懒商城</a></div>
    </div>
    <div class="main">
        <!--1. header ： logo+ 搜索-->
        <div class="header">
            <!--2. 全部商品标题-->
            <div class="cart-filter-bar">
                <div class="switch-cart">
                    <span class="cart-title">全部商品</span>
                    <span class="cart-pro-number"></span>
                </div>

                <div class="search-right">

<%--                    <form action="" class="search-form">--%>
<%--                        <input type="text" class="keyword" placeholder="搜索商品">--%>
<%--                        <a href="" class="search-btn">搜索</a>--%>
<%--                    </form>--%>

                </div>
            </div>


        </div>

        <!--3. 操作的小标题-->
        <div class="cart-head">
            <div class="head-checkbox">
                <input type="checkbox">
                <span>全选</span>
            </div>

            <div class="head-goods">商品</div>
            <div class="head-props"></div>
            <div class="head-right">单价</div>
            <div class="head-right">数量</div>
            <div class="head-right">小计</div>
            <div class="head-right">操作</div>
        </div>


        <!--4. 商品列表-->
        <div class="pro-list">
            <ul>
                <li><c:forEach items="${serverResponse.data}" var="pro">

                    <div class="shop-name">

                        <span> ${pro.product.proBrand}</span>
                    </div>
                    <!--商品详情： 左边（图片名称） + 右边（价格操作）-->

                    <div class="goods-detail">

                        <!-- 左边（图片名称）-->
                        <div class="goods-left">
                            <input type="checkbox" class="checkbox">
                            <!--店铺名称-->

                            <a href="" class="goods-img">
                                <img src="${pro.product.proImg}">
                            </a>
                            <a href="" class="goods-name">
                                    ${pro.product.proDesc}
                                    <%--                                Apple iPhone 12 (A2404) 128GB 黑色 支持移动联通电信5G 双卡双待手机--%>

                            </a>
                        </div>


                        <!-- 右边（价格操作）-->
                        <div class="goods-right">
                            <div class="cell unit-price">
                                <span>￥</span>
                                <span>${pro.product.proPrice}</span>
                            </div>
                            <div class="cell cart-quality" >
                                <button>-</button>
                                <input type="text" value="${pro.cart.proCount}">
                                <button>+</button>
                                <input type="hidden" value="${pro.product.proId}" class="proId">

                            </div>

                            <div class="cell cart-xiaoji">
                                <span>￥</span>
                                <span>${pro.product.proPrice*pro.cart.proCount}</span>
                            </div>
                            <div class="cell cart-delete">
                                    <%--                                <a>${pro.cart.cartId}</a>--%>

                                <form action="${pageContext.request.contextPath}/shopcar/deletesss/${pro.cart.cartId}" method="post">
<%--                                    <input type="hidden" name="_method" value="delete">--%>
                                    <input type="submit" style=" margin-left:30px;border: none; background-color: white" value="删除"/></form>
                                        </form>
                            </div>
                            <div class="daohuo">
                                    <%--                                <a href="">到货通知</a>--%>
                            </div>

                        </div>
                    </div>
                </c:forEach>
                </li>

            </ul>
        </div>


        <!--5. 底部结算条-->
        <div class="cart-floatbar">
            <div class="jiesuan-left">
                <input type="checkbox">
                <span>全选</span>
<%--                <a href="">删除选中的商品</a>--%>
                <a href="">取消选中</a>
            </div>


            <div class="jiesuan-right">
                <div class="selected-count">
                    <span class="selected-count-label">已选中</span>
                    <span class="number">2</span>
                    <span class="selected-count-label">件商品</span>
                </div>

                <div class="zongjia">
                    <span class="selected-count-label">总价:</span>
                    <span class="zongjia-price">￥</span>
                    <span class="zongjia-price">11998</span>

                </div>

                <%--  传递参数，参数传递的是 购物车中选中商品的 productId 数组 ，直接调用 controller 层的数据进行 页面跳转  --%>
                <%--                <a href="${pageContext.request.contextPath}/order/place_an_order.jsp" id="goToOrder" class="jiesuan-btn">去结算</a>--%>
                <input type="button" id="goToOrder" class="jiesuan-btn" value="去结算" onclick="goOrder()">

            </div>
        </div>
    </div>
    <script src="${pageContext.request.contextPath}/js/js_购物车.js"></script>
    <script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>
    <script>

        // 要先把选中的商品id及其对应的商品数量添加到map集合中
        var productIdAndCount = new Map();


        // var idAndCount =new Map();
        document.querySelector("#goToOrder").onclick = function () {

            var proCheckboxArr = document.querySelectorAll(".goods-left input");
            console.log("proCheckboxArr=" + proCheckboxArr.length);
            for (var i = 0; i < proCheckboxArr.length; i++) {
                if (proCheckboxArr[i].checked) {


                    // checkbox状态 == true,获得他们对应的数量
                    // img
                    var cartQualityEle = proCheckboxArr[i].parentElement.nextElementSibling.children[1];
                    var count = parseInt(cartQualityEle.children[1].value);  // 选中的商品的数量
                    var proId = parseInt(cartQualityEle.children[3].value);  // 选中的商品id

                    console.log("当前商品数量是：" + count);
                    console.log("当前商品ID是：" + proId);
                    // 把商品id及其对应的商品数量加到 map 中
                    productIdAndCount.set(proId, count);

                }
            }
            console.log(productIdAndCount);

            // 将map转为object
            let obj = Object.create(null);
            for (let [k, v] of productIdAndCount) {
                obj[k] = v;
            }

            console.log("开始请求");

            console.log(JSON.stringify(productIdAndCount));

            <%--var url = "${pageContext.request.contextPath}/order/place_an_order/xiadanyemain?customerId="+${loginCustomer.custId} + "&map=" + JSON.stringify(productIdAndCount);--%>
            console.log(obj);
            // 要想后端传递数据，使用post请求

            <%--var url="${pageContext.request.contextPath}/order/place_an_order";--%>


            // var oReq = new XMLHttpRequest();
            // oReq.open("POST", url, false); // 同步请求
            // oReq.setRequestHeader("Content-type", "application/json");
            // oReq.send(productIdAndCount);//发送数据需要自定义，这里发送的是JSON结构
            // var result = oReq.responseText;//响应结果

            // 如果已经选中商品就进行跳转
            if ("{}" != JSON.stringify(obj)){
                $.ajax({
                    url: "${pageContext.request.contextPath}/order/place_an_order",
                    // url:url,
                    data: obj,
                    method: 'post',
                    async: false,
                    success: function (data) {
                        //实际操作的时候，返回的json对象中可能会有成功错误的判断标记，所以可能也需要判断一下
                        window.location.href = "${pageContext.request.contextPath}"+data;
                    },
                    error: function (data) {
                        // console.log("失败返回的数据: " + JSON.stringify(data));
                        // console.log("得到的url");
                        // console.log(data.responseText);
                        // console.log(JSON.stringify(this.data.responseText));
                        <%--window.location.href = "${pageContext.request.contextPath}"+data.responseText;--%>
                    },

                })
            }


            <%--window.location.href = "${pageContext.request.contextPath}/order/place_an_order.jsp";--%>
            <%--window.location.href = "${pageContext.request.contextPath}/order/place_an_order/xiadanyemain?customerId="+${loginCustomer.custId} + "&map=" + obj;--%>

        }

    </script>

</div>
</body>
</html>